<div class="options" appAnnotation="evaluate.options">
  <mat-icon class="clickable" (click)="toggle$.next(!toggle$.value)">filter_list</mat-icon>
  <div class="popover" *ngIf="toggle$ | async">

    <!-- league -->
    <ng-container *ngIf="options.leagueId">
      <ng-container *ngIf="leagues$ | async as leagues">
        <span class="option" (wheel)="onLeaguesWheel($event, leagues)">
          {{ leagues[options.leagueId] }}
        </span>
      </ng-container>
      <span class="divider"></span>
    </ng-container>


    <!-- online -->
    <span class="clickable" title="online" (click)="onToggleOnlineClick()">
      <mat-icon>{{options.online ? 'wifi' : 'wifi_off'}}</mat-icon>
    </span>
    <!-- indexed -->
    <ng-container *ngIf="options.indexed">
      <span class="option" (wheel)="onIndexedWheel($event)">
        {{ options.indexed }}
      </span>
      <span class="divider"></span>
    </ng-container>


    <!-- fetch-count -->
    <ng-container *ngIf="options.fetchCount">
      <span class="option" (wheel)="onFetchCountWheel($event)">
        {{ options.fetchCount }}
        <span>{{'evaluate.options.count' | translate}}</span>
      </span>
      <span class="divider"></span>
    </ng-container>

    <!-- reset -->
    <span class="clickable" title="reset" (click)="onResetClick()">
      <mat-icon>restore</mat-icon>
    </span>
  </div>
</div>